<template>
  <ul class="dateTypes">
    <li :class="{'selected':'day'===showDate}" @click="showDate = 'day'">按天</li>
    <li :class="{'selected':'week'===showDate}" @click="showDate = 'week'">按周</li>
    <li :class="{'selected':'month'===showDate}" @click="showDate = 'month'">按月</li>
  </ul>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';

@Component
export default class dateTypes extends Vue {
  get showDate(){
    return this.$store.state.showDate
  }

  set showDate(value){
    this.$store.state.showDate = value
  }
}
</script>

<style lang="scss" scoped>
.dateTypes {
  display: flex;
border-bottom: 4px solid white;
  li {
    text-align: center;
    background-color: #c4c4c4;
    width: 33.33%;
    padding: 16px 0;

    &.selected {
      background-color: #999;
    }
  }
}
</style>